<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <title>Document</title>
    <style>
        form {
            margin-top: 10%;
            margin-left: 40%;
            margin-right: 40%;
        }

        .form-image {
            margin-left: 15%;
            margin-bottom: 10%;
        }
    </style>
</head>
<body>
<form>
    <div class="form-image">
        <img src="http://www.itheima.com/images/logo.png" alt="">
    </div>
    <div class="form-group">
        <input type="text" name="username" class="form-control" placeholder="用户名">
    </div>
    <div class="form-group">
        <input type="password" name="password" class="form-control" placeholder="密码">
    </div>

    <input type="submit" class="btn btn-success form-control" value="登录">
</form>
<script src="/static/js/jquery.js"></script>
<script src="/static/layer/layer.js"></script>
<script>
    // 表单默认有提交事件
    //点击提交  发送ajax
    $(":submit").click(function (e) {
        // 禁止表单默认的提交事件
        e.preventDefault();
        username = $("input").eq(0).val();
        password = $("input").eq(1).val();
        {#console.log(username,password);#}
        // 用户和密码的数据
        data = {'username': username, password:password,'csrfmiddlewaretoken':'{{csrf_token}}'}
        $.ajax({
            type: "POST",
            url: "{% url 'login' %}",
            data: data,
            success: function (response) {
                if(response.status==0){
                    window.location.href='http://127.0.0.1:8000/app02/hostlist';
                }else{
                    layer.msg('登录失败');
                }
            }
        });
    })

</script>
</body>
</html>